<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      width: 600px;
      margin: auto;
      border: 1px solid #ccc;
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }

    .imgbox {
      height: 240px;
      width: 100%;
      overflow: hidden;
    }

    .imgbox img {
      width: 100%;
      height: auto;
    }

    .cartCar {
      width: 15px;
      height: 15px;
      margin-left: 5px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    thead {
      background-color: #e9e9e9;
      height: 30px;
    }

    .first {
      width: 60px;
    }

    td,
    th {
      height: 50px;
      text-align: center;
      border: 1px solid #ccc;
    }

    .checkbox-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      /* background-color: #a7641d; */
    }

    .sandbox {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 0;
    }

    .sandbox>* {
      width: 30px;
      height: 30px;
      border: none;
      margin: 0 5px;
    }

    .num {
      width: 35px;
      height: 18px;
      display: inline-block;
      text-align: center;
      border: 1px solid #000;
      margin: 0;
    }

    button {
      cursor: pointer;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 5px;
      padding: 5px 10px;
    }

    button:hover {
      background-color: #0056b3;
    }

    .delbutton {
      background-color: #dc3545;
    }

    .delbutton:hover {
      background-color: #a71d2a;
    }

    img {
      width: 60px;
      height: 50px;
    }

    .totalTd>div {
      margin-left: 350px;
    }

    .totalMoney {
      font-size: 22px;
      color: #f9828e;
    }

    .empty {
      font-size: 30px;
      color: rgb(250, 198, 130);
    }

    .emptyCar {
      margin-left: 200px;
      height: 30px;
    }

    .active {
      background-color: #e1dede;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 头部 -->
    <div class="imgbox">
      <img
        src="https://tse4-mm.cn.bing.net/th/id/OIP-C.zYnP9ysA5EOut8nve0D-BAHaC9?w=334&h=140&c=7&r=0&o=5&dpr=1.3&pid=1.7"
        alt="">
    </div>
    <!-- 中间 -->
    <p><img src="./images/购物车.png" alt="" class="cartCar"> / 购物车</p>
    <hr>
    <!-- 表格 -->
    <div class="main" v-if="fruitList.length>0">
      <table border="1">
        <!-- 表头 -->
        <thead>
          <tr></tr>
          <th class="first">选中</th>
          <th>图片</th>
          <th>单价/元</th>
          <th>个数</th>
          <th>小计</th>
          <th>操作</th>
          </tr>
        </thead>
        <!-- 表体 -->


        <tbody>
          <tr v-for="(item,index) in fruitList" :key="item.id" :class="{active:item.isChecked}">
            <!-- 选中 -->
            <td class="checkbox-cell">
              <input type="checkbox" v-model="item.isChecked" name="fruit" id="oneFruit">
            </td>
            <!-- 图片 -->
            <td>
              <img :src="item.image" alt="">
            </td>
            <!-- 单价 -->
            <td>{{item.price}}</td>
            <!-- 数量 -->
            <td class="sanbox">
              <button @click="sub(item.id)" :disabled="item.num <= 1">-</button>
              <span class="num">{{item.num}}</span>
              <button @click="add(item.id)">+</button>
            </td>
            <!-- 总价 -->
            <td>{{item.num * item.price}}</td>
            <!-- 操作 -->
            <td>
              <button class="delbutton" @click="delbutton(item.id)">删除</button>
            </td>
          </tr>


          <!-- 结算 -->
          <tr>
            <!-- 全选 -->
            <td class="checkbox-cell">
              <input type="checkbox" v-model="isAll" name="fruit" id="oneFruit">全选
            </td>
            <!-- 总价 -->
            <td class="totalTd" colspan="5">
              <div><span>总价：￥<span class="totalMoney">{{totalMoney}} </span></span>
                <button>结算 <span>({{totalCount}})</span></button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div v-else="">
      <div class="empty"><img src="./images/购物车.png" alt="" class="emptyCar">空空如也</div>
    </div>



  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    // 初始化购物车
    const defaultArr = [{
      id: 1,
      image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.--W6K90Dmqnso-beUDtgoQHaE7?w=273&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7',
      isChecked: true,
      num: 2,
      price: 2
    },
    {
      id: 6,
      image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.2KPz0SjaMSueuJFwm8Ft4QHaHa?w=192&h=191&c=7&r=0&o=5&dpr=1.3&pid=1.7',
      isChecked: true,
      num: 35,
      price: 48
    },
    {
      id: 3,
      image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.QPlt7FFEpzif0jO_TIQEewHaJJ?w=156&h=193&c=7&r=0&o=5&dpr=1.3&pid=1.7',
      isChecked: true,
      num: 6,
      price: 10
    },
    {
      id: 4,
      image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.N-PrzorpkjBjm6l_OO4RJwHaE8?w=290&h=194&c=7&r=0&o=5&dpr=1.3&pid=1.7',
      isChecked: true,
      num: 1,
      price: 8
    },
    {
      id: 5,
      image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.P1f8YGsCi7MVKRTbXmku7gHaG7?w=210&h=195&c=7&r=0&o=5&dpr=1.3&pid=1.7',
      isChecked: true,
      num: 4,
      price: 6
    }]
    const app = new Vue({
      el: '#app',
      data: {
        fruitList: JSON.parse(localStorage.getItem('fruitList')) || defaultArr
      },
      methods: {
        delbutton(id) {
          this.fruitList = this.fruitList.filter(item => item.id !== id)
        },
        sub(id) {
          const fruit = this.fruitList.find(item => item.id === id);
          if (fruit) {
            fruit.num--;
          }
        },
        add(id) {
          const fruit = this.fruitList.find(item => item.id === id);
          if (fruit) {
            fruit.num++;
          }
        }
      },
      computed: {
        isAll: {
          get() {
            return this.fruitList.every(item => item.isChecked)
          },
          set(value) {
            this.fruitList.forEach(item => item.isChecked = value)
          }
        },
        totalCount() {
          return this.fruitList.reduce((prev, item) => {
            if (item.isChecked)
              return prev + item.num
            else
              return prev
          }, 0)
        },
        totalMoney() {
          return this.fruitList.reduce((prev, item) => {
            if (item.isChecked)
              return prev + item.price * item.num
            else
              return prev
          }, 0)
        }
      },

      //监视数据变化，保存本地
      watch: {
        fruitList: {
          deep: true,
          handler(newValue) {
            localStorage.setItem('fruitList', JSON.stringify(newValue))
          }
        }
      }

    })
  </script>
</body>

</html>